@extends('backend::modal')
@section('title',$page_title)
@push('styles')
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/cascader/cascader.css')}}" rel="stylesheet">
@endpush
@section('content')
            @component('backend::component.form.form')
                @slot('form_title') {{$page_title}} @endslot
                @slot('formId') manager-menu @endslot
                @slot('action') {{$action}} @endslot

                    @component('backend::component.form.form-group')
                        @slot('title') 菜单名称 @endslot
                        @component('backend::component.form.input')
                            @slot('name') menu_title @endslot
                            @slot('value') {{$menu->title??''}} @endslot
                        @endcomponent
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 父菜单 @endslot
                        @slot('class') menu-group @endslot
                        <div class="layui-input-block">
                            @component('backend::component.form.input')
                                @slot('name') menu_icon @endslot
                                @slot('attr')
                                    id="menu_parent"
                                    data-parents="{{$parent_menus}}"
                                    readonly="readonly"
                                @endslot
                            @endcomponent
                            <input type="hidden" id="menu-value" name="menu_parents"  value="{{$parent_ids}}">
                        </div>
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 图标 @endslot
                        @slot('attr') id="set-menu" @endslot
                        <div class="layui-input-block">
                            @component('backend::component.form.input')
                                @slot('name') menu_icon @endslot
                                @slot('attr') id="iconPicker" @endslot
                                @slot('value') {{$menu->icon ?? 'hcl-biaodan'}}  @endslot
                            @endcomponent
                        </div>
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 排序 @endslot
                        @component('backend::component.form.input')
                            @slot('name') sort @endslot
                            @slot('value') {{$menu->sort??'1000'}} @endslot
                        @endcomponent
                    @endcomponent

                    @component('backend::component.form.form-group')
                        @slot('title') 描述 @endslot
                        @component('backend::component.form.textarea')
                            @slot('name') comment @endslot
                            @slot('value') {{$menu->comment??''}} @endslot
                        @endcomponent
                    @endcomponent

                    @slot('buttons')
                            @component('backend::component.form.button')
                                @slot('title') 提交 @endslot
                                @slot('params') {"formId":"#manager-menu"} @endslot
                                @slot('class') btn-min-width ajax-form @endslot
                            @endcomponent
                            @component('backend::component.form.button')
                                @slot('title') 重置 @endslot
                                @slot('type') reset @endslot
                                @slot('color') danger @endslot
                                @slot('class') btn-min-width @endslot
                            @endcomponent
                    @endslot
            @endcomponent
@endsection
@push('scripts')
    <script>
        layui.use(['jquery','layer','cascader','iconPicker'], function(){
            var $ = layui.jquery;
            var layer = layui.layer;
            var cascader = layui.cascader;
            var iconPicker = layui.iconPicker;
            init();

            function init(){
                selectParentMenu();
                iconPickerMenu();
            }

            function selectParentMenu() {
                var data = $('#menu_parent').data('parents');
                var defaultVal = "{{$parent_ids?:0}}".split(',');
                cascader({
                    elem: "#menu_parent",
                    data: data,
                    triggerType: "change",
                    value: defaultVal,
                    changeOnSelect:true,
                    success:function (valData) {
                        $('#menu-value').val(valData);
                    }
                });
            }

            function  iconPickerMenu() {
                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    iconClass:'hcl',
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12
                });
                iconPicker.checkIcon('iconPicker', '{{ $menu->icon ?? "hcl-biaodan" }}','hcl');
            }
        });
    </script>
@endpush